<template>
  <div>
    <!-- 1.0 搜索框 -->
    <van-search
      v-model.trim="keyword"
      shape="round"
      placeholder="请输入搜索关键词"
      @input="inputFn"
    />
    <!-- 2.0 热门搜索 -->
    <div
      class="search_wrap"
      v-if="searchList.length === 0"
    >
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="item in hotList"
          :key="item.first"
          @click="btn(item.first)"
        >{{ item.first }}</span>
      </div>
    </div>
    <!-- 3.0 搜索结果 -->
    <div
      class="search_wrap"
      v-else
    >
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 调用组件的时候需要传递 音乐名称和歌手 -->
        <SongItem
          v-for="item in searchList"
          :key="item.id"
          :name="item.name"
          :author="item.ar[0].name"
          :id="item.id"
        ></SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
// 目标: 铺设热搜关键字
// 1. 搜索框van-search组件, 关键词标签和样式
// 2. 找接口, api/index.js里定义获取搜索关键词的请求方法
// 3. 引入到当前页面, 调用接口拿到数据循环铺设页面
// 4. 点击关键词把值赋予给van-search的v-model变量

// 目标: 铺设搜索结果
// 1. 找到搜索结果的接口 - api/index.js定义请求方法
// 2. 再定义methods里getListFn方法(获取数据)
// 3. 在点击事件方法里调用getListFn方法拿到搜索结果数据
// 4. 铺设页面(首页van-cell标签复制过来)
// 5. 把数据保存到data后, 循环van-cell使用即可(切换歌手字段)
// 6. 互斥显示搜索结果和热搜关键词
import { hotSearch, searchResultAPI } from "../../api/index";
import SongItem from "../../components/SongItem.vue";
export default {
  components: {
    SongItem,
  },
  // 定义数据的结构
  data() {
    return {
      keyword: "",
      hotList: [],
      searchList: [],
      // 加载中提示：默认不展示
      loading: false,
      // 已完成提示：默认不展示
      finished: false,
      page: 1, //  分页的页码
      // 防抖的延时器
      timer: null,
    };
  },
  // 通过 watch 简化分页加载时的变量维护
  watch: {
    // 关键词变化分页相关数据需要重置
    keyword() {
      this.page = 1;
      this.loading = false;
      this.finished = false;
    },
    // 搜索列表数据变化，加载状态隐藏
    searchList(){
      this.loading = false;
    }
  },
  // 生命周期钩子 - 组件初始化
  async created() {
    // 调用热搜列表(简略)
    // hotSearch().then((res) => {
    //   console.log(res);
    const res = await hotSearch();
    this.hotList = res.data.result.hots;
    // });
  },
  // 定义方法的结构
  methods: {
    // await 不能单独使用，需要配合 async 使用才行
    async btn(val) {
      // this.page = 1;
      // this.finished = false; // 开始时：已完成提示需要隐藏
      // 点击热搜关键词，选中的关键词显示到搜索框
      this.keyword = val;
      // 调用搜索
      const res = await this.getListFn();
      // this.getListFn().then((res) => {
      // console.log(res);
      this.searchList = res.data.result.songs;
      // this.loading = false; // 请求结束：隐藏加载中提示
      // });
    },
    // 考虑以后的复用性，把搜索请求进行封装
    getListFn() {
      return searchResultAPI({
        keywords: this.keyword,
        // limit : 返回数量 , 默认为 30
        limit: 20,
        // offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
        offset: (this.page - 1) * 20,
      });
    },
    // 输入框内容变化时触发
    //    输入框 - 防抖（回城效果）
    inputFn() {
      // 如果有以前有运行延时器，取消掉以前的延时器
      if (this.timer) clearTimeout(this.timer);
      // 启动新的延时器
      this.timer = setTimeout(async () => {
        // 内部才是业务代码
        // this.page = 1;
        // this.finished = false; // 请求结束：加载中提示需要隐藏
        // console.log(this.keyword);
        // 如果输入框的值为空，就不用发送请求了
        if (this.keyword === "") {
          this.searchList = [];
          return;
        }
        // 不为空，发送请求
        const res = await this.getListFn();
        // this.getListFn().then((res) => {
        // console.log(res);
        // 没有搜索结果，就变成 undefined.length 报错
        if (!res.data.result.songs) {
          this.searchList = [];
          return;
        }
        // 把最新的歌曲列表展示到页面中
        this.searchList = res.data.result.songs;
        // this.loading = false; // 请求结束：加载中提示需要隐藏
        // });
      }, 500);
    },
    // 触底时触发 onLoad 事件 ( loadding: false 和 finished: false)
    //  当组件滚动到底部时，会触发 load 事件并自动将 loading 设置成 true
    async onLoad() {
      console.log("触底了onLoad函数被执行");
      // 页码要累加1
      this.page++;
      // 根据最新页码请求数据
      const res = await this.getListFn();
      // this.getListFn().then((res) => {
      console.log(res);
      // res.data.result.songs
      if (!res.data.result.songs) {
        // 如果没有请求到数据，已完成提示(就不会再触发 onLoad )
        this.finished = true;
        return;
      }
      // 把请求回来的数据通过 ...展开变成 20 条数据，再追加到数组中
      this.searchList.push(...res.data.result.songs);
      // 请求结束后，一定要把 loading 隐藏掉（没有隐藏就不会再触发 onLoad 事件了）
      // this.loading = false;
      // });
    },
  },
};
</script>

<style>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>